<!DOCTYPE html>
<html>

<head>
	<style>
		html,
		body {
			height: 100%;
		}

		body {
			margin: 0;
		}

		img {
			width: 640px;
			height: 378px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -189px;
			margin-left: -320px;
		}
	</style>
	<meta charset="utf-8" />
	<title>360度全景展示</title>

	<script>
		window.onload = function () {
			//	var img0= document.getElementById("img0");
			//	img0.index = 0;
			//缓冲区,创建文档片段
			var frag = document.createDocumentFragment();
			//加载所有图片
			for (var i = 1; i <= 76; i++) {
				var img = document.createElement("img");
				//		img.index = i;
				img.src = "img/" + i + ".jpg";
				img.style.display = "none";
				frag.appendChild(img);
			}
			document.body.appendChild(frag);
			//伪数组  instanceof NodeList
			var imgs = document.getElementsByTagName("img");
			var lastIndex = 0;
			var startX = 0;//上一个坐标
			var index = 0;
			var prevImg = null;
			document.onmousedown = function (event) {
				startX = event.clientX;
				document.onmousemove = function (event) {
					//随着移动，更换图片
					var x = event.clientX;
					var dis = x - startX;//新坐标-旧坐标
					if (dis >= 0) {//往右边滑动
						index = (Math.floor(dis / 20) + lastIndex) % 77;
					} else {
						index = (77 + Math.floor(dis / 20) + lastIndex) % 77;
					}

					//效率待改进
					//						for(var i=0; i<imgs.length; i++) {
					//							imgs[i].style.display = "none";
					//						}

					if (prevImg) prevImg.style.display = "none";
					imgs[index].style.display = "block";
					document.title = index;
					prevImg = imgs[index];
				}
			}
			document.onmouseup = function (event) {
				//鼠标松开时记录位置
				lastIndex = index;
				document.onmousemove = "";
			}
		};
	</script>
</head>

<body>
	<div style="z-index: 100; opacity: 0.01; background: black; position: fixed; width: 100%; height: 100%;"></div>
	<img id="img0" src="img/0.jpg" />
</body>

</html>